!!! 5
%html
  %head
    %meta{:charset=>"UTF-8"}/
    %title
      布局练习
    :css
      /* 排版演示 */

      nav {
            background-color: lightblue;
        }

      article>header, footer {
          background-color: goldenrod;
          }
      /* 清楚浮动演示 */
      aside {clear: left;
        float: left;
        height: auto;
        background-color: cyan;
        width: 10%}
      article {float: left;
      width: 80%;
      border: solid 1px;
      margin-left: 1em;}
      footer {clear: left;}

      img {
        width: 30%;
        height: auto;
        border: solid 3px pink;
        margin: 0 6px 3px 0;}

      img:nth-child(2) {float: left;}

      article div {text-indent: 2em;}

  %body
    %header 布局练习
    %nav 导航
    %aside 
      边侧栏
      %ol
        %li 爱情
        %li 含义
        %li 历史
    %article
      %header
        %h1 布局
        %time
          庚子年
      %p
        1你好, 爱你一生一世。
        %img(src="weimei2.jpg" alt="weimei")/
        2你好, 爱你一生一世。
        %img(src="love.jpeg" alt="love")/
        3你好, 爱你一生一世。
        %div
          爱情是个体与个体（多数指人）之间的强烈的依恋、亲近、向往，以及无私并且无所不尽其心的情感。它通常是情与欲的对照，爱情由情爱和性爱两个部分组成，情爱是爱情的灵魂，性爱是爱情的附加属性，并不是必要存在的，情爱才是爱情的根本与核心。
        %div
          重复一遍。
          爱情是个体与个体（多数指人）之间的强烈的依恋、亲近、向往，以及无私并且无所不尽其心的情感。它通常是情与欲的对照，爱情由情爱和性爱两个部分组成，情爱是爱情的灵魂，性爱是爱情的附加属性，并不是必要存在的，情爱才是爱情的根本与核心。
      %footer
        你可以访问
        %a(href="https://baike.baidu.com/item/%E7%88%B1%E6%83%85/57") 爱情